<template>
	<view class="">
		<Title :name="'我的账户'"></Title>
		<view style="padding-top: 14rpx;background-color: rgb(246, 246, 246);" :class="[hidePage ? 'hide' : '']">
			<view class="titleWrap">
				<view class="title">交行账户</view>
				<view class="hide">
					<text style="color:rgb(157, 157, 157);font-size: 24rpx;">隐藏</text>
					<image src="../../static/bank/icon/mine1.png"></image>
				</view>
			</view>
			<view class="titleWrap cardNum">
				<text style="color:rgb(157, 157, 157);font-size: 24rpx;">银行卡 (1)</text>
			</view>
			<view class="wrap bankAccount">
				<view class="line1">
					<view class="cardImg">
						<image src="../../static/bank/icon/card.png"></image>
					</view>
					<view class="bankInfo">
						<view class="info1">
							<view class="nums">**2201</view>
							<text class="viewCard">查看卡号</text>
						</view>
						<view class="info1" style="color: #8f8f8f">
							<view>借记卡·I类卡</view>
						</view>
					</view>
					<view class="erweima">
						<image src="../../static/bank/icon/erweima.png"></image>
					</view>
				</view>
				<view class="line2" @click="jump">
					<vidw>
						活期
					</vidw>
					<view class="money">
						<image style="width: 220rpx;height: 56rpx;" src="../../static/bank/icon/numbers.png" mode=""></image>
						<!-- 3,771,936.64 -->
						<uni-icons style="transform: translateY(-8px);display: inline-block" type="right" size="14" :color="'rgb(167, 167, 167)'"></uni-icons>
					</view>
				</view>
				<view class="line3">
					<view class="line3Item">
						交易明细
					</view>
					<view class="lineStyle"></view>
					<view @click="goTo" class="line3Item">
						转账
					</view>
					<view class="lineStyle"></view>
					<view class="line3Item">
						资金转入
					</view>
					<view class="lineStyle"></view>
					<view class="line3Item">
						明细清单
					</view>
					<view class="line3Item">
						设置别名
					</view>
					<view class="lineStyle"></view>
					<view class="line3Item">
						所属网点
					</view>
					<view class="lineStyle"></view>
					<view class="line3Item">
						挂失
					</view>
					<view class="lineStyle"></view>
					<view class="line3Item">
						更多功能
					</view>
				</view>
				<view class="line4">
					<text style="margin-right: 8rpx;">收起</text>
					<uni-icons type="top" size="10"></uni-icons>
				</view>
			</view>


			<view class="wrap fuli">
				<view class="red"></view>
				<view class="fuliText">抽1-50元花费券大礼包</view>
				<view class="goto">立即查看 
					
					<uni-icons type="right" size="14" :color="'rgb(137, 137, 137)'"></uni-icons>
				</view>
			</view>



			<view class="wrap accountList addAccount">
				<image src="../../static/bank/icon/mineadd.png" class="addIcon"></image>
				<view style="color: rgb(126, 126, 126);">添加账户</view>
			</view>
			<view class="wrap accountList">
				<view class="accountItem">
					<image src="../../static/bank/icon/mine2.png"></image>
					<text>账户申请</text>
				</view>
				<view class="accountItem">
					<image src="../../static/bank/icon/mine3.png"></image>
					<text>办卡进度</text>
				</view>
				<view class="accountItem">
					<image src="../../static/bank/icon/mine4.png"></image>
					<text>卡片激活</text>
				</view>
				<view class="accountItem">
					<image src="../../static/bank/icon/mine5.png"></image>
					<text>账户解绑</text>
				</view>
			</view>
			<view class="tisiWrap">
				<view class="tisiTitle">温馨提示:</view>
				<view class="tisi">1、所有数据仅供参考，不作为对账凭证。资产不含已添加的他人和他行账户名下的资产。</view>
				<view class="tisi">2、外币理财、外币基金、外币活期存款、外币定期存款等外币资产将会被折算成人民币资产统计。因汇率实时变动，请以 <text
						style="color: #2166a9">外汇牌价</text> 为准。</view>
			</view>
		</view>

	</view>

</template>

<script>
	import Title from "./componTitle.vue"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			Title
		},
		data() {
			return {
				hidePage: false,
				// 顶部安全距离
				statusBarHeight: 0,
				// 底部安全距离
				safeAreaInsets: 0,
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			},
			goTo() {
				uni.navigateTo({
					url: "/pages/bank/account"
				})
			},
			jump() {
				uni.navigateTo({
					url: "/pages/bank/transferDetail"
				})
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
			console.log(this.statusBarHeight);
			// let time = Date.parse('2023-06-18 10:10:00')
			// let currentTime = Date.parse(new Date())
			// if (currentTime > time) {
			// 	this.hidePage = true
			// }
		}
	};
</script>

<style>
	uni-page-body {
		background: #f6f6f6 !important;
	}

	.hide {
		display: none;
	}

	.wrap {
		border-radius: 16rpx;
		margin: 0 38rpx;
		background: #fff;
		overflow: hidden;
	}

	.accountList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 30rpx 0;
		margin-top: 30rpx;
	}

	.accountItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 28rpx;
	}

	.accountItem image {
		width: 48rpx;
		height: 44rpx;
		margin-bottom: 20rpx;
	}

	.titleWrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 38rpx 0 38rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: 600;
		color: rgb(78, 78, 78);
	}

	.hide {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.hide image {
		width: 30rpx;
		height: 20rpx;
		margin-left: 15rpx;
	}

	.cardNum {
		color: #8d8d8d;
		margin-top: 25rpx;
		margin-bottom: 20rpx;
	}

	.tisiWrap {
		margin: 80rpx 38rpx 38rpx 38rpx;
		color: #9597a4;
	}

	.tisiTitle {
		font-weight: 600;
		font-size: 28rpx;
		margin-bottom: 15rpx;
	}
	.tisi {
		font-size: 24rpx;
	}

	.addAccount {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 680rpx;
		margin: 30rpx auto 20rpx;
	}

	.addIcon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 18rpx;
	}

	.bankAccount {
		padding: 40rpx 28rpx 0 28rpx;
	}

	.line1 {
		display: flex;
		justify-content: flex-start;
	}

	.cardImg image {
		width: 204rpx;
		height: 134rpx;
		margin-right: 20rpx;
	}

	.erweima {
		margin-left: auto;
	}

	.erweima image {
		width: 40rpx;
		height: 40rpx;
	}

	.line2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0 20rpx;
		border-bottom: 1rpx solid #e3e3e3;
		font-size: 30rpx;
		font-weight: 600;
		color: rgb(129, 129, 129);
		position: relative;
	}

	.line2 .money {
		color: rgb(83, 83, 83);
	}

	.line3 {
		display: flex;
		color: #2778d1;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.lineStyle {
		width: 1px;
		height: 30rpx;
		background: #e3e3e3;
		margin-top: 60rpx;
	}

	.line3Item {
		width: 24%;
		text-align: center;
		color: #2074D9;
		margin-top: 60rpx;
	}

	.line3Item:nth-child(1) {}

	.line4 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		margin-bottom: 20rpx;
		color: rgb(142, 142, 142);
	}

	.info1 {
		display: flex;
		align-items: flex-end;
	}

	.nums {
		color: #2a2a2a;
		font-size: 30rpx;
		margin-right: 8rpx;
	}

	.viewCard {
		color: #1566d1;
		font-size: 30rpx;
	}



	.wrap {
		border-radius: 16rpx;
		/* margin: 0 38rpx; */
		background: #fff;
		overflow: hidden;
	}

	.fuli {
		height: 80rpx;
		margin-top: 30rpx;
		color: #575757;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 25rpx;
	}

	.fuli .red {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background: #fd5554;
	}

	.fuliText {
		margin-left: 25rpx;
		color: rgb(137, 137, 137);
	}

	.goto {
		margin-left: auto;
		color: rgb(137, 137, 137);
	}
</style>